<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl">
	<head>
		<title>Reisagenda</title>
		<link rel="stylesheet" href="template/bootstrap/bootstrap-responsive.css" type="text/css" />
		<link rel="stylesheet" href="template/bootstrap/bootstrap.css" type="text/css" />
		<link rel="stylesheet" href="template/style.css" type="text/css" />
		<script src="js/libs/jquery.js" type="text/javascript" ></script>
		<script src="js/libs/jquery-ui.js" type="text/javascript" ></script>
		<script src="js/libs/jquery.gmap-1.1.0-min.js" type="text/javascript" ></script>
		<script src="js/libs/bootstrap.js" type="text/javascript" ></script>
	</head>
	<body>
		<div id="maincontainer">
			<div id="header">
				<a href="index.html"><img src="images/logo.png" id="logo"></a>
			</div>
			<div id="container">
				<div class="sidecontent">
					<div class="section">
						<h2>Kalender</h2>
						<div id="datepicker"></div>
					</div>
					<div class="section">
						<h2>Kaart</h2>
						<div id="map">
							<img src="images/googlemaps.png" alt="map" />
						</div>
					</div>
				</div>
				<div id="maincontent">
					<div class="section">
						<h2>Kaart</h2>
						<div id="map" style="width: 460px" >
							<img src="images/googlemaps.png" alt="map" style="width: 600px" />
						</div>
						<p onclick="window.location='agenda.html'" style="cursor: pointer">
							Terug
						</p>
					</div>
				</div>
				<div class="sidecontent">
					<div class="section">
						<h2>Kies Vervoer</h2>
						<div class="activiteiten">
							<h3 class="klapUit">Openbaar Vervoer</h3>
							<div>
								<ul>
									<li class="item">
										Bus
									</li>
									<li class="item">
										Trein
									</li>
									<li class="item">
										Metro
									</li>
								</ul>
							</div>
							<h3 class="klapUit">Prive Vervoer</h3>
							<div>
								<ul>
									<li class="item">
										Auto
									</li>
								</ul>
								<script>
									$(function() {

										$("#datepicker").datepicker();

										$("h3.klapUit").click(function() {
											$(this).toggleClass('ui-state-active');
											$(this).next().slideToggle(300);
										});
										$("h4.klapUit").click(function() {
											$(this).toggleClass('ui-state-active');
											$(this).next().slideToggle(300);
										});
										//$( ".activiteiten-inner" ).accordion();
										refresh = function() {
											$('.placeholder').droppable({
												accept : '.item',
												hoverClass : "ui-state-active",
												drop : function(event, ui) {
													var div = $('<div></div>').addClass('resizer').text(ui.draggable.text()).appendTo(this);
													$('<span class="del">x</span>').click(function() {
														$(this.parentNode).resizable('destroy');
														$(this.parentNode.parentNode).text('').removeClass('activity').addClass('placeholder');
														refresh();
													}).appendTo(div);
													$(this).removeClass('ui-droppable placeholder').addClass('activity');
													$(div).resizable({
														maxHeight : 400,
														minHeight : 40,
														grid : 40,
														handles : 's'
													});
													$(this).droppable("destroy");
												}
											});
											$('#agenda').sortable({
												items : '.point',
												cancel : '.placeholder',
												start : function() {
													$('.resizer').resizable('destroy');
												},
												stop : function() {
													$('.resizer').resizable({
														maxHeight : 400,
														minHeight : 40,
														grid : 40,
														handles : 's'
													});
												}
											});
											$(".item").draggable({
												helper : 'clone',
												cursor : 'move',
												containment : '#maincontainer',
												revert : 'invalid'
												/*collision: function(event, ui){
												 alert('lol');
												 }*/
											});
											/*$("#agenda" ).bind(
											 "collision",
											 function(event,ui) { alert('w');
											 // $(this) is the draggable
											 // event is one of the below types, see them for details and event.* contents
											 // ui is the same as in "drag" et al
											 }
											 );*/
										}
										refresh();
										$(".item").disableSelection();
										$("#agenda").disableSelection();
									});

								</script>
	</body>
</html>